import React from "react";
import styles from "../index.less";

class Tags extends React.Component {
  handleClick = (tag) => {
    const { tagClick } = this.props;
    tagClick(tag.value);
  };

  TagItemRender = (tag = {}, id) => (
    <div
      id={id}
      className={styles.tagItem}
      key={tag.value}
      onClick={() => {
        this.handleClick(tag);
      }}
    >
      {tag.name}
    </div>
  );

  render() {
    const { data, id } = this.props;
    return (
      <div className={styles.tags}>
        {data.map((item) => this.TagItemRender(item, id))}
      </div>
    );
  }
}

export default Tags;
